<template>
  <div class="main">
    <div class="write-container">
      <div class="write-wrap flex">
        <div class="write-main">
          <div class="form-item flex">
            <p class="form-label font-14-B">收件人</p>
            <div class="form-input flex flex-align-items-center">
              <p class="font-12">{{ form.recipient.join(',') }}</p>
              <span class="font-12">1</span>
            </div>
          </div>
          <div class="form-item flex">
            <p class="form-label font-14-B">主题</p>
            <el-input v-model="form.title" maxlength="50"></el-input>
          </div>
          <div class="form-item flex">
            <div class="form-upload flex flex-align-items-center">
              <div class="font-14 flex flex-align-items-center pointer" @click="uploadFileShow = true">
                <i class="iconfont icon-fujian"></i>添加附件
              </div>
              <p class="font-14">注：附件数量上限为10个,且附件总大小不超过200MB</p>
            </div>
          </div>
          <div class="form-item flex">
            <p class="form-label font-14-B">正文</p>
            <div class="form-editor">
              <Editor v-model="form.content" />
              <form-tool></form-tool>
            </div>
          </div>
        </div>
        <div v-if="asideForm.tab" class="write-drawer">
          <template-content v-if="asideForm.tab === '模板'"></template-content>
          <sign-content v-if="asideForm.tab === '签名'"></sign-content>
          <pro-content v-if="asideForm.tab === '产品'"></pro-content>
          <task-content v-if="asideForm.tab === '任务'"></task-content>
          <originality-content v-if="asideForm.tab === '创意'"></originality-content>
        </div>
        <div class="write-aside flex-center flex-column flex-align-items-center">
          <div v-for="(item, index) in tabs" :key="index" class="flex flex-column flex-align-items-center pointer"
            :class="{ active: item.name === asideForm.tab }" @click="tabChange(item.name)">
            <i class="iconfont flex-center flex-align-items-center" :class="item.icon"></i>
            <span class="font-12">{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="write-foot flex flex-align-items-center" :style="{ paddingRight: asideForm.tab ? '607px' : '88px' }">
        <p class="font-14 pointer">存草稿</p>
        <p class="font-14 pointer">定时发送</p>
        <p class="font-14 pointer">立即发送</p>
      </div>
    </div>
  </div>

  <upload-file v-if="uploadFileShow" :list="form.files" @close="uploadFileShow = false"></upload-file>

  <know v-if="knowShow" @close="knowShow = false"></know>
</template>

<script setup>
import { ref } from 'vue';
import Editor from '@/views/staging/components/editor.vue';
import UploadFile from './components/uploadFile.vue';
import FormTool from './components/formTool.vue';
import know from './components/know.vue';
import TemplateContent from './components/templateContent.vue';
import SignContent from './components/signContent.vue';
import ProContent from './components/proContent.vue';
import TaskContent from './components/taskContent.vue';
import OriginalityContent from './components/originalityContent.vue';

const tabs = [
  {
    name: '模板',
    icon: 'icon-wenjianmoban'
  },
  {
    name: '签名',
    icon: 'icon-tongyong-gangbi'
  },
  {
    name: '产品',
    icon: 'icon-chaolianjie'
  },
  {
    name: '任务',
    icon: 'icon-renwu'
  },
  {
    name: '创意',
    icon: 'icon-art'
  }
];

const knowShow = ref(false);
const uploadFileShow = ref(false);
const form = ref({
  recipient: ['xxxxx'],
  title: '',
  files: [],
  content: '1111111'
});
const asideForm = ref({
  tab: null
});

const tabChange = e => {
  if (asideForm.value.tab !== e) {
    asideForm.value.tab = e;
  } else {
    asideForm.value.tab = null;
  }
}
</script>

<style lang="less" scoped>
.main {
  padding: 16px;
}

.write-container {
  height: calc(100vh - 96px);
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
}

.write-wrap {
  margin-bottom: 24px;
  height: calc(100% - 88px);
  padding: 24px 24px 0;

  .write-main {
    flex: 1;
    height: 100%;
    overflow: auto;
    margin-right: 24px;
    padding-top: 10px;

    &::-webkit-scrollbar {
      width: 0;
    }

    .form-item {
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }

      .form-label {
        width: 66px;
        color: #333;
        line-height: 34px;
      }

      .form-input {
        width: 100%;
        height: 34px;
        flex: 1;
        padding: 0 12px;
        border: 1px solid #dcdee0;
        border-radius: 2px;
        position: relative;

        p {
          color: #767676;
          border-bottom: 1px solid @main-color;
        }

        span {
          height: 20px;
          padding: 0 6px;
          background: @main-color;
          border-radius: 10px;
          font-size: 12px;
          color: hsla(0, 0%, 100%, .9);
          line-height: 20px;
          position: absolute;
          top: -8px;
          left: -7px;
        }
      }

      &::v-deep {
        .el-input {
          width: 100%;
          height: 34px;
          flex: 1;
        }
      }

      .form-upload {
        padding-left: 66px;

        div {
          color: #999;
          margin-right: 24px;

          i {
            color: #999;
          }
        }

        p {
          color: #999;
        }
      }

      .form-editor {
        width: 100%;
        flex: 1;
        border: 1px solid #dcdee0;
        padding-bottom: 24px;
      }
    }
  }
}

.write-drawer {
  width: 450px;
  height: 100%;
  flex-shrink: 0;
}

.write-aside {
  width: 40px;
  height: 100%;

  div {
    width: 40px;
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 0;
    }

    &:hover,
    &.active {

      i,
      span {
        color: @main-color;
      }
    }

    i {
      width: 40px;
      height: 40px;
      margin-bottom: 8px;
      border-radius: 50%;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .04);
      font-size: 20px;
      color: #dddcdd;
    }

    span {
      color: #707070;
    }
  }
}

.write-foot {
  height: 64px;
  justify-content: end;

  p {
    height: 32px;
    padding: 0 16px;
    border-radius: 2px;
    text-align: center;

    &:nth-child(1),
    &:nth-child(2) {
      border: 1px solid #d9d9d9;
      color: #333;
      line-height: 30px;
      margin-right: 16px;
    }

    &:nth-child(3) {
      background: @main-color;
      color: #fff;
      line-height: 32px;
    }
  }
}
</style>
